function login() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var loginBtn = document.getElementById("loginBtn");
    loginBtn.disabled = true; // 禁用按钮，表示正在处理登录请求

// 使用Ajax发送请求到后台服务器验证用户名和密码
    var xhr = new XMLHttpRequest();
    console.log("获取到用户名密码" + username + password)
    xhr.open("POST", "/test", true); // 这里需要替换为实际的后台服务器URL地址
    console.log("亲求发生")
    xhr.setRequestHeader("Content-Type", "application/json");


    var data = JSON.stringify({
        username: document.getElementById('username').value, // 获取用户名输入框的值作为用户名数据-->
        password: document.getElementById('password').value // 获取密码输入框的值作为密码数据-->
    });
    xhr.send(data); // 发送数据给后台程序-->


    console.log("cg")


    // 设置请求头，告诉服务器我们发送的数据类型是JSON格式的数据
    xhr.onreadystatechange = function () { // 当请求状态发生变化时触发此函数，例如请求完成或出错等。当请求完成时，this.readyState值为4。这时我们可以通过检查此值来确定请求是否完成。此外我们也可以使用onerror方法来处理请求错误。但这里只是演示正常登录功能所以简单一点用条件判断就可以了。因为发送成功，所以此时是user是真实有效的登录对象（数据库里面的字段一般设置为真实的字段名称+后缀或者空格或者其他任意一个后缀等等都是安全的。）；
        if (xhr.readyState === 4 && xhr.status === 200) {


            // 请求成功，返回的数据格式为JSON格式的字符串。如果返回的状态码为200表示请求成功。
// 因此我们可以用条件判断来判断请求是否成功。如果是则表示登录成功。这里我们只是简单地将返回的数据打印出来供测试使用。
// 真实使用中应该进行数据解析或者进一步处理等等。 // 在这里可以打印出返回的数据进行测
//
            console.log(xhr.responseText);
// 试或者进行后续操作。我们还可以用这段代码来模拟登录成功后的页面
//
// 跳转等等操作。例如：
            window.location.href = "www.baidu.com";
// 这里需要替换为实际的成功页面URL地址。这里只是简单地将用户重定向到登录页面。但实际使用中应该根据实际情况进行页面跳转等等操作。
//
//
// 因为返回的数据是JSON格式的字符串，所以我们可以直接使用
//

            console.log();
            // JSON.parse()

        }

    }
}

function add() {


    location.href="www.baidu.com"

}

//
// 方法将返回的数据转换成JavaScript对象方便我们处理返回的数据内容等。也可以通过打印输出来看看数据的内容。
// 最后我们将表单元素恢复为原始状态。这个时候我们已经得到了真实有效的登录对象等参数就可以通过表单或者URL等等参数来实现登录后的功能等等操作了。
// 因此我们需要将表单元素恢复为原始状态。最后调

//
// 方法提交表单即可将数据发送到后台服务器进行验证处理等操作了。所以这个时候我们将表单元素恢复为原始状态可以防止页面跳转前又自动重新提交表单等等问题等等操作等等。。
// 另外由于使用Ajax进行数据交互的过程中不会影响页面的刷新或者重载等操作